Day8 金魚 簡易表格

簡單小語

練習表格一開始真的會搞不清楚欄跟列的排序方式，再慢慢練習後終於知道tr,th,td差異處，一開始看出還真的一頭霧水呢，表格不僅僅只是做表格，還記得Amos老師分享過，當你不能使用float,flex,grid排版時，你還能用什麼？就是用table啦，CSS無所不在，在做RWD時也要考慮螢幕寬度調整，這次的表格刻意練習的確又讓我更加深了表格製作，以及細節需注意的部分，另外也自行加了動畫效果(即使很吃效能)，繽紛一下畫面，人生就是不斷的切版，不斷的練習。

筆記分享

1. 須釐清colspan及rowspan的差異，合併欄寬或合併列高。
2. 當所有表格都加上border時，為了避免線條重複，在父層加上border-collapse: collapse，即可消除重複線條。
3. RWD時的表格需出現bar讓使用者滑動，因此在外層中加入 overflow: scroll，當物件溢出時就會產生bar條。
4. :nth-child()，非常好用的選取器，可以設定奇數偶數，自訂數列，指定數字，針對有規律的位置做選取並增加CSS樣式。
5. animation動畫加入linear才不會覺得動畫卡卡的，動得很生硬。
6. 使用偽元素就可在標題上增加形狀而增加其動畫效果。
7. 使用.table 包入 table是為了可以更有彈性的修改排版方式。
8. font-awesome在codepen中要連父層一起選到，不然樣式出不來。
9. first-child ，last-child，分別選到第一個及第一個指定標籤。
10. RWD需注意各尺寸寬度，利用max-width在父層，內層使用%控制寬度。

刻意練習

Practice(200727 Day 8)

首次練習

Practice(200607功課表_1)

2020 iT邦幫忙鐵人賽 Day8 網頁前端-刻意練習(簡易表格)